<template>
    <h3>用户列表:</h3>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column label="昵称" prop="nickName" />
        <el-table-column label="地址" prop="address" />
        <el-table-column label="性别" prop="sex" />
        <el-table-column label="年龄" prop="age" />
        <el-table-column label="账号" prop="account" />
        <el-table-column align="right">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                    编辑
                </el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination layout="prev, pager, next" :total="total" v-model:page-size="pageSize" @current-change="changePageFn" />
</template>

<style lang="scss" scoped>
    h3{
        margin-bottom: 10px;
        margin-left: 10px;
    }
    .page{
        margin-top: 10px;
        margin-left: 50%;
        transform: translateX(-50%);
    }

</style>

<script lang="ts" setup>
import { ref,computed } from 'vue'
import { userList } from '../../api/request'
import api from '../../api/http'

let pageSize = ref(5)// 每页条数(自己设置每页有多少条)
let total = ref(0)// 总条数(不用设置 别动它)

// 形容对象的结构
interface User {
    nickName: string;
    address: string;
    sex: string;
    age: number;
    imgUrl: string;
    account: string;
    id?: number;
}
// 编辑用户信息................................................
const handleEdit = (index: number, row: User) => {
    console.log(index, row)
}
// 删除用户.....................................................
const handleDelete = (index: number, row: User) => {
    console.log(index, row)
}
// 获取用户列表(根据分页).....................................................
// 记录用户列表数据
const tableData =ref([])
// 请求用户列表数据(根据分页)
const userListFn = async (page:number,pageSize:number) => {
    await userList({ page, pageSize }).then(
        content=>{
            let {code,result}=content;
            if(code===200){
                tableData.value=result;  
            }
        }
    )
}
// 获取所有用户列表.................................................
const userlistAll = async()=>{
    await api.listAll().then(
        content=>{
            // 让总数等于所有列表的数量
            total.value=content.content.length
        }
    )
}
userlistAll();

// 点击分页时的方法...............................................
const changePageFn=(num:number)=>{
   userListFn(num,pageSize.value);
}
// 从初始化用户列表
userListFn(1,pageSize.value);

</script>